<template>
    <div>
        <Navbar></Navbar>
        <div id="user">
            <router-link class="a" to="/">首页 ></router-link>
            <router-link class="a" to="/xiaozu">小组 ></router-link>
            <router-link class="a" :to="'/fenqu/'+details.data.data.name">{{details.data.data.name}} ></router-link>
            <!--<span class="a">{{details.data.data.name}} ></span>-->
            <span class="a">话题</span>
        </div>
        <div id="detailsuser"  >
            <img class="yangshi" :src="'http://127.0.0.1:3000'+detailsuser.data.data.avatar" alt="">
            <span id="name" class="span">{{detailsuser.data.data.nickname}}</span>
            <span class="span">发表于2年前</span>
        </div>
        <div id="aaa">
            
            
            <!--<span>{{a}}</span>-->
            <!--<br>-->
            <h1 id="title">{{details.data.data.title}}</h1>
            <br>
            <p>{{details.data.data.content}}</p>
            <br>
            <!--<span>{{details.data.data.sellid}}</span>-->
            
        </div>
        <div id="hflb" v-for="a in hflb.data.data">
            <img id="img" :src="'http://127.0.0.1:3000'+a.id.avatar" class="yangshi" alt="">
            <span class="span">{{a.id.nickname?a.id.nickname:a.id.username}}</span>
                <br>
                <br>
            <span id="pad">{{a.content}}</span>
           
            
        </div>
        <Huifu ></Huifu>
    </div>
</template>

<script>
    import {mapState} from "vuex";
    import Navbar from "../components/Navbar.vue"
    import Huifu from "../components/Huifu.vue"
  export default {
    components: { Navbar,Huifu },
    data:function(){
        return {
            a:false,
            abc:""
        } 
    },
    computed:{
      ...mapState([
        "details",
        "hflb",
        "detailsuser"
      ]) 
    },
    mounted: function(){
    
        var a = this.$route.params.id;
        this.$store.dispatch("details",a);

        var sellid = this.details.data.data.sellid
        this.$store.dispatch("detailsuser",id)
        .then(data=>{
            this.a = !this.a
        })
        
        // this.$store.dispatch("updata");

        var id = this.details.data.data._id
        this.$store.dispatch("hflb",id)
    },
    
  }
</script>

<style scoped>
    #user{
        /*border: 1px solid black;*/
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding-left: 12px;
    }
    .yangshi{
        width: 20px;
        height: 20px;
        border-radius: 50%;
    }
    #detailsuser{
        padding-top: 12px;
        padding-left: 12px;
    }
    #aaa{
        padding-top: 12px;
        padding-left: 12px;
        padding-right: 8px;
    }
    #title{
        display: inline-block;
        font-size: 16px;
        color: #e24c7c;
    }
    .span{
        display: inline-block;
        color: #808080;
        vertical-align:top;
    }
    #name{
        padding-left: 8px;
    }
    .a{
        color: #808080;
        font-size: 14px;
        text-decoration: none;
    }
    #pad{
        padding-left: 15px;
    }
    #hflb{
        padding-top: 8px;
        padding-left: 12px;
        padding-bottom: 15px;
        vertical-align:top;
        border-bottom: 1px solid #eeeeee;
    }
</style>